import { scrollTo } from '@/utils/scrollTo';
<template>
  <div>
    <div class="flex justify-between">
      <el-button
        type="danger"
        style="width:100px;height:40px"
        @click="deBounceWrap(handleDeleteAll)"
        >批量删除</el-button
      >
      <el-form inline>
        <el-form-item label="是否绑定权限:">
          <el-select
            v-model="listQuery.is_bind_access"
            placeholder="不限"
            clearable
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              clearable
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="deBounceWrap(handleClick)" type="primary"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="data" @selection-change="handleSelectionChange" border>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="id" width="80"></el-table-column>
      <el-table-column
        prop="ctr_dir"
        label="控制器目录"
        width="120"
      ></el-table-column>
      <el-table-column prop="ctr" label="控制器"></el-table-column>
      <el-table-column prop="action" label="方法名"></el-table-column>
      <el-table-column prop="uri" label="路由地址"></el-table-column>
      <el-table-column
        prop="method"
        label="请求方法"
        width="80"
      ></el-table-column>
      <el-table-column prop="is_bind_access" label="是否绑定权限" width="120">
        <template slot-scope="{ row }">
          <el-tag type="danger" v-if="row.is_bind_access === 0">否</el-tag>
          <el-tag type="success" v-if="row.is_bind_access === 1">是</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        width="100"
        prop="is_exist"
        label="是否存在"
        :render-header="renderHeader"
      >
        <!-- <template slot="header">
          <span>是否已经不存在</span>
          <el-tooltip
            class="item"
            effect="dark"
            content="数据库存在但路由文件不存在"
            placement="top"
          >
            <el-button icon="el-icon-price-tag" circle size="mini"></el-button>
          </el-tooltip>
        </template> -->

        <template slot-scope="{ row }">
          <el-tag type="danger" v-if="row.is_exist === 0"></el-tag>
          <el-tag type="success" v-if="row.is_exist === 1">是</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            type="primary"
            plain
            size="mini"
            icon="el-icon-edit"
            @click="deBounceWrap(handlePower, scope.row)"
            >添加权限</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <cus-pagination
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.page_size"
      @pagination="getList"
    />
  </div>
</template>
<script>
import { routeList, delroute } from "@/api/routingList/routingList";
export default {
  data() {
    return {
      //表单数据
      data: [],
      typeOptions: [
        { value: 0, label: "否" },
        { value: 1, label: "是" }
      ],
      listQuery: {
        is_bind_access: null, //0否   1是
        page: 1,
        page_size: 10
      },
      total: 0,
      // 勾选内容
      multipleSelection: [],
      // 要删除的内容的ids
      dataIds: "",
      currentId: ""
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // render 事件
    renderHeader(h, { column }) {
      return h("div", [
        h("span", column.label),
        h(
          "el-tooltip",
          {
            props: {
              effect: "dark",
              content: `数据库存在但路由文件不存在`,
              placement: "top"
            }
          },
          [
            h("i", {
              class: "el-icon-question",
              style: "color:#409eff;margin-left:5px;"
            })
          ]
        )
      ]);
    },

    //搜索
    handleClick() {
      this.listQuery.page = 1;
      this.getList();
    },
    //列表展示
    getList() {
      routeList(this.listQuery).then(res => {
        this.data = res.data.data;
        this.total = res.data.total;
      });
    },
    //添加权限
    handlePower(row) {
      window["localStorage"].setItem("row", JSON.stringify(row));
      this.$router.push({
        path: "/config/editModal",
        query: { status: "add" }
      });
    },
    // 勾选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection, "mul");
    },
    //批量删除
    handleDeleteAll() {
      if (this.multipleSelection.length) {
        /* 存在勾选数据 */ const Routeids = this.multipleSelection.reduce(
          (pre, currRow) => {
            pre += `${currRow.id},`;
            return pre;
          },
          ""
        );
        const ids = Routeids.substring(0, Routeids.length - 1);
        delroute({ ids })
          .then(() => this.$message.success("删除成功！"))
          .catch(console.error)
          .finally(() => /* 刷新数据 */ {
            this.multipleSelection = [];
            this.getList();
          });
      } /* 不存在勾选数据 */ else {
        this.$message.warning("请勾选要删除的数据！");
      }
    }
  }
};
</script>
<style></style>
